extends /layout

block declarations
    - additional_title = lingua.Remote;
    - body_id = 'remote';
    - include_validation = true;

block additional_metadata
    meta(name="HandheldFriendly" content="true")
    meta(name="viewport" content="width=device-width initial-scale=1, maximum-scale=1, user-scalable=no")

block additional_css
    link(rel='stylesheet', href='/remote/css/style.css')

block additional_scripts
    script(type='text/javascript').
        $(function(){
            $('.validate-form').validate();

            window.scrollTo(0,0);

            $('i.ellipsis.vertical.icon.settings').on('click touchstart', function(){
                $('#settings').toggleClass('show');
            });

            $('.keyboard.link').on('click', function(e){
                $('#keyboard-wrapper').toggle();
                $("#sendValueInput").focus();
            });

            $('#main').on('click', function(){
                if($('#settings').hasClass('show')) $('#settings').removeClass('show');
            });

            $('.status').text('Remote not connected');

            $(document).on('touchstart','.link' ,function(){
                $(this).find('i').css("color","#fb8521");
            }).on('touchend', function(){
                $(this).find('i').css("color","#333");
            }).on("touchcancel", function() {
                $(this).find('i').css("color","#333");
            });

            $.ajax({
                    url: '/configuration/',
                    type: 'get'
                }).done(function(data){
                    var socket = io.connect();

                    socket.on('connect', function(data){
                        socket.emit('remote');

                        $('.status').text('Remote connected');

                        $(".left.link").on('click',function(){
                            socket.emit('control',{action:"goLeft"});
                        });

                        $(".right.link").on('click',function(){
                            socket.emit('control',{action:"goRight"});
                        });

                        $(".enter.link").on('click',function(){
                            socket.emit('control',{action:"enter"});
                        });

                        $(".dashboard.link").on('click',function(){
                            socket.emit('control',{action:"dashboard"});
                        });

                        $(".back.link").on('click',function(){
                            socket.emit('control',{action:"back"});
                        });

                        $(".pause.link").on('click',function(){
                            socket.emit('control',{action:"pause"});
                        });

                        $(".fullscreen.link").on('click',function(){
                            socket.emit('control',{action:"fullscreen"});
                        });

                        $(".mute.link").on('click',function(){
                            socket.emit('control',{action:"mute"});
                        });

                        $(".shuffle.link").on('click',function(){
                            socket.emit('control',{action:"shuffle"});
                        });

                        $("#sendValueInput").keyup(function(){
                            var keyValue = $('#sendValueInput').val();
                            socket.emit('message',keyValue);
                        });

                        socket.on("loading", function(data){
                            console.log(data);
                        });
                    });
                });
        });

block body
    #settings.hide
        form#setupRemote.validate-form(action='/submitRemote',method='post', role="form")
            .form-group
                label #{lingua.setting_movielocation}
                input(name="moviepath",type="text",placeholder="#{lingua.settings_placeholder_path}", value= movielocation, data-rule-required="true", data-rule-path="true",  data-msg-path="Specify a valid path. Please end with a slash.")
            .form-group
                label #{lingua.setting_musiclocation}
                input(name="musicpath",type="text",placeholder="#{lingua.settings_placeholder_path}", value= musiclocation, data-rule-required="true", data-rule-path="true",  data-msg-path="Specify a valid path. Please end with a slash.")
            .form-group
                label #{lingua.setting_tvlocation}
                input(name="tvpath",type="text",placeholder="#{lingua.settings_placeholder_path}", value= tvlocation, data-rule-required="true", data-rule-path="true",  data-msg-path="Specify a valid path. Please end with a slash.")
            .form-group
                label #{lingua.setting_language}
                select#language(name="language")
                    - for lang in availableLanguages
                        option(value=lang, selected=lang == language) #{lang}
            .form-group
                label #{lingua.setting_location}
                input(name="location",type="text",placeholder="#{lingua.settings_placeholder_location}", value= location,data-rule-required="true")
            if spotifyUser !== ""
                .form-group
                    label Spotify Username
                    input(name="spotifyUser",type="text", value=spotifyUser)
            if spotifyPass !== ""
                .form-group
                    label Spotify Password
                    input(name="spotifyPass",type="password", value=spotifyPass)
            .form-group
                label(for="screensaver") Screensaver
                select#screensaver(name="screensaver")
                    - for saver in availableScreensavers
                        option(value=saver, selected=saver == screensaver) #{saver}
            .form-group
                label #{lingua.setting_theme}
                select#theme(name="theme")
                    - for theme in themes
                        option(selected=theme) #{theme}
            .form-group.mcjs-rc-controllable
                label(for="schedule") When should data be gathered autmatically?
                input#port.mcjs-rc-clickable(name="schedule",type="text",placeholder="eg. 12:30", value= schedule,data-rule-required="true", data-msg-required="This field is required.")
            .form-group
                label #{lingua.setting_port}
                input(name="port",type="text",placeholder="#{lingua.settings_placeholder_port}", value= port ,data-rule-required="true")
            .form-group
                input.btn(type="submit",value="#{lingua.setting_submit}")
                input(name="screensaver",type="hidden",value= screensaver)

    i.ellipsis.vertical.icon.settings
    #main
        #color-wrapper
            h1 MediacenterJS
                span remote
            .push
            #remote-wrapper
                .inner-wrapper
                    .back.link.vert-top.horiz-middle
                        i.reply.mail.icon
                    .left.link.vert-middle.horiz-left
                        i.left.arrow.icon
                    .enter.link.vert-middle.horiz-middle
                        i.play.sign.icon
                    .right.link.vert-middle.horiz-right
                        i.right.arrow.icon
                    .pause.link.vert-bottom.horiz-middle
                        i.pause.icon
        #plain-wrapper
            .fullscreen.link
                i.fullscreen.icon
            .mute.link
                i.mute.icon
            .dashboard.link
                i.dashboard.icon
            .keyboard.link
                i.keyboard.icon
            .shuffle.link
                i.shuffle.icon

        .status
        #keyboard-wrapper
            input#sendValueInput(name="sendValue",type="text",value="")
